<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>

        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/spine.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">
            // clase Usuario
            var User = Spine.Class.sub({
                init: function(usuario,clave){
                    this.usuario = usuario;
                    this.clave   = clave;
                }
            });

            var user = new User('Flynn');
            
            
            var Users = Spine.Controller.sub({
                events : {
                    "click  #btnAceptar":"autenticar",
                    "click  #btnLimpiar":"limpiar"
                },
                elements : {
                    "#usuario" : "usuario",
                    "#clave" : "clave",
                    "#mensaje" : "mensaje"
                },
                
                autenticar: function(){
                    console.info("usuario : ",this.usuario.val());
                    console.info("clave : ",this.clave.val());
                    this.mensaje.html(this.usuario.val() + this.clave.val());
        
                },

                limpiar: function(){
                    console.info("limpiar");
                    this.usuario.val("");
                    this.clave.val("");
                }
            });
            
            
            // Correr la aplicacion (Run)
            jQuery(function($){
                return new Users({
                    el:$("#frmLogin")
                });
            });
            
            
        </script>
    </head>

    <body>
        <div id="views">
            <div id="frmLogin">
                <h1>Todos</h1>
                <form>
                    <label>Usuario</label> <input id="usuario" type="text" placeholder="usuario">
                    <label>Clave</label>   <input id="clave" type="text" placeholder="clave">
                </form>
                <button id="btnAceptar">Aceptar</button>
                <button id="btnLimpiar">Limpiar</button>
                <div style="border: 1px solid red;width: 200px;" id="mensaje"></div>
            </div>
            
        </div>
    </body>
</html>
